<template>
<view class="">
	<view class="list-item">
		<view class="list-item-t">
			<view class="list_item-img" @click="toMixinIndex(1,{userId: info.user_id})">
				<identityAvatarVue :identity="info.circle_host" :avatar="info.user.head" />
			</view>
			<view class="list_item-header">
				<view class="list_item-header-h">
					<view class="list_item-header-h-l">
						<view class="list_item-header-h-name">
							{{info.user.nickname}}
							<image :src="ossUrl + `/static/setting/${info.user.sex === '女' ? '7' : '6'}.png`" mode="">
							</image>
							<image :src="u" mode="" style="border-radius: 50%;margin-left: 10rpx;"
								v-for="u in info.Icon"></image>
						</view>

					</view>

					<view class="list_item-header-h-r" v-if="info.user.name">
						{{info.user.name}}
					</view>
				</view>
				<view class="list_item-header-h-address" style="margin-bottom: 5rpx;">
					<!-- <image :src="ossUrl + `/static/card/2.png`" mode=""></image> -->

					{{ info.address || ''}}
				</view>
				<!-- <view class="list_item-header-time">
						{{info.add_time}}
					</view> -->
			</view>
		</view>
		<view class="list-item-content">
			<rich-text :nodes="replaceEmoji(info.content)" space="nbsp"></rich-text>
		</view>


		<view class="course">
			<view class="course-list">
				<view class="course-list-item" v-for="(item,index) in info.upload" v-if="item">
					<view class="course-list-item-header" v-if="$getIsImage(item) === 1">
						<image :src="item" style="display: flex;" mode="widthFix" class="course-list-item-header-video"
							@click.stop="getPrevImg(info.upload,item)">
						</image>
						<!-- 	<image :src="ossUrl + `/static/index/播放.png`" mode=""
								class="course-list-item-header-play"></image> -->
					</view>
					<view class="course-list-item-header" id='video' v-if="$getIsImage(item) === 2">
						<!-- <video :src="item" style="width: 100%;height: 400rpx;"></video> -->
						<VideoTemplate :src="item" :imgUrl="imgUrl + '?x-oss-process=video/snapshot,t_0,f_jpg,w_350'"
							@btnplay='btnplay' ref="VideoTemplateRef3" />
					</view>
				</view>
			</view>
		</view>

		<!-- 约球 -->
		<view class="list-item-activity" v-if="info.reservation && info.type == 3">
			<view class="list-item-activity-crad">
				<view class="list-item-activity-crad-item"
					v-if="info.reservation.latitude && info.reservation.longitude " @click.stop="opencompany()">
					<text style="width: 60rpx;">地址</text>：<text
						style="flex: 1;font-weight: unset;">{{ info.reservation.address }}</text>
				</view>
				<view class="list-item-activity-crad-item" v-else>
					<text style="width: 60rpx;">地址</text>：<text
						style="flex: 1;font-weight: unset;">{{ info.reservation.address }}</text>
				</view>
				<view class="list-item-activity-crad-item">
					<text>开始时间</text>：{{info.reservation.event_date}} {{info.reservation.start_time}}
				</view>
				<view class="list-item-activity-crad-item" v-if="info.reservation.type == 1">
					<text>报名结束时间</text>：{{info.reservation.actitveEndTime}}
				</view>
				<view class="list-item-activity-crad-item" v-if="info.reservation.type == 1">
					<text>倒计时</text>：
					<!-- it.reservation.event_date + ' ' + it.reservation.end_time -->
					<countDownVue :time="getRemainingTimeToTimestamp(info.reservation.actitveEndTime)" />
				</view>
				<view class="list-item-activity-crad-item" @click.stop="setPhone(info.reservation.contact_info)">
					<text>手机号</text>：{{info.reservation.contact_info || ''}}
				</view>
				<view class="list-item-activity-crad-item">
					<text>需报名人数</text>：{{info.reservation.max_participants || 0}}人
				</view>
				<view class="list-item-activity-crad-item" v-if="info.reservation.minUser">
					<text>最低举办人数</text>：{{info.reservation.minUser || 0}}人
				</view>

				<view class="list-item-activity-crad-item" v-if="info.reservation.price">
					<text>单人费用</text>：{{info.reservation.price || 0}}元
				</view>
			</view>
			<view class="list-item-activity-people" v-if="info.reservation && info.type == 3">
				<view class="list-item-activity-people-title" style="font-weight: bold;">报名表：</view>
				<!-- 看过 -->
				<view class="nums" @click="toPeople(info.id)">
					<view class="nums-img">
						<image :src="item" mode="" v-for="item in info.head" style="border-radius: 50%;">
						</image>
					</view>
					<view class="nums-tx">等{{info.count}}人已报名</view>
				</view>
			</view>

			<view class="list-item-activity-btn-cancle" v-if="info.reservation.type == 2"
				style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
				已取消
			</view>
			<template v-else>
				<view class="list-item-activity-btn" v-if="isTimeOut > 0 && info.reservation_type != 1"
					@click="submit(info.id)">
					点击报名
				</view>
				<view class="list-item-activity-btn-cancle" v-if="isTimeOut === 0 && it.reservation_type != 1"
					style="color: #B8B8B8; border: 1rpx solid #B8B8B8;">
					已结束
				</view>
				<view class="list-item-activity-btn-cancle" v-if="info.reservation_type == 1" @click="cancle(info.id)">
					取消报名
				</view>
			</template>
		</view>

		<view class="list-item-score" v-if="info.time_axis && info.type == 2">
			<view class="list-item-score-list">
				<view>成绩：<text>{{info.time_axis.total_rod_number_sum}}</text></view>
				<view>距离：<text>{{info.time_axis.max_distance_avg}}</text></view>
				<view>上球道：<text>{{info.time_axis.fairway_hit_rate_percent}}</text></view>
			</view>
			<view class="list-item-score-list">
				<view>上果岭：<text>{{info.time_axis.green_in_regulation_rate_percent}}</text></view>
				<view>界外球：<text>{{info.time_axis.out_of_bounds_count_sum}}</text></view>
				<view>下水数：<text>{{info.time_axis.water_hazard_rate_percent}}</text></view>
				<view>沙坑数：<text>{{info.time_axis.sand_trap_rate_percent}}</text></view>
			</view>
			<view class="list-item-score-list">
				<view>切杆数：<text>{{info.time_axis.chip_shots_sum}}</text></view>
				<view>推杆数：<text>{{info.time_axis.putts_sum}}</text></view>
			</view>
		</view>

		<view class="list-add" v-if="circle_info.is_admin === 1 || userInfo.id==info.user_id ">
			<span @click="delCircle">删除</span>
		</view>

		<view class="list-time">
			{{info.add_time}}
		</view>
		<view class="list-item-activity" v-if="!(info.reservation && info.type == 3)">
			<view class="list-item-activity-people" @click="toLikeNum()">
				<!-- <view class="list-item-activity-people-title">点赞数</view> -->
				<!-- 看过 -->
				<view class="nums">
					<view class="nums-img">
						<image :src="item.head" mode="" v-for="item in info.like_head"
							style="border-radius: 50%;border: 2px solid #E5E5E5;">
						</image>
					</view>
					<view class="nums-tx">等{{info.like_count}}人已点赞</view>
				</view>
			</view>
		</view>
		<view @click.stop v-if="info.goods">
			<productsVue v-if="!Array.isArray(info.goods) && info.business_card_id" :info="info.goods"
				:nickname="info.user.nickname" />
			<videoVue v-if="!Array.isArray(info.goods) && !info.business_card_id" :info="info.goods" />
		</view>
	</view>
	<view class="comment">
		<view class="comment-title">留言</view>
		<view class="comment-list" v-for="it in list" :key="it.id" @click="setOther(it)">
			<view class="comment-list-c">
				<view class="comment-list-img">
					<!-- <image :src="it.head" mode=""></image> -->
					<identityAvatarVue :identity="it.circle_host" :avatar="it.head" />
				</view>
				<view class="comment-list-center">
					<view class="list_item-header-h">
						<view class="list_item-header-h-l">
							<view class="list_item-header-h-name">
								{{it.nickname}}
								<image :src="ossUrl + `/static/setting/${it.sex === '女' ? '7' : '6'}.png`" mode="">
								</image>
							</view>
							<view class="list_item-header-h-address">
								<image :src="ossUrl + `/static/card/2.png`" mode=""></image>
								{{it.address}}
							</view>
						</view>
						<!-- <view class="list_item-header-h-btn">
								关闭活动
							</view> -->
						<!-- <view class="list_item-header-h-img" @click="open">
								<image :src="ossUrl + `/static/setting.png`"></image>
							</view> -->
					</view>
					<view class="comment-list-center-content">
						{{it.content}}
					</view>
					<view class="list_item-header-h-time">{{formatTimestamp(it.add_time,1)}}</view>
					<view class="list-del" @click="delComment(it.id)"
						v-if="it.del_type === 1 || circle_info.is_admin === 1">删除</view>
				</view>
			</view>
			<view class="comment-list-layout" v-if="it.children.length > 0">
				<view class="comment-list-c" v-for="item in it.children" @click="setOther(item,id)">
					<view class="comment-list-img">
						<!-- <image :src="item.head" mode=""></image> -->
						<identityAvatarVue :identity="item.circle_host" :avatar="item.head" />
					</view>
					<view class="comment-list-center">
						<view class="list_item-header-h">
							<view class="list_item-header-h-l">
								<view class="list_item-header-h-name">
									{{item.nickname}}
								</view>
							</view>


						</view>
						<view class="comment-list-center-content">
							{{item.content}}
						</view>
						<view class="list_item-header-h-time">{{formatTimestamp(item.add_time,1)}}</view>
						<view class="list-del" v-if="item.del_type === 1 || circle_info.is_admin === 1"
							@click="delComment(item.id)">删除</view>
					</view>
				</view>
			</view>
		</view>.
	</view>
	<view class="send">
		<input type="text" :placeholder="other ? '回复：' + other.nickname : '说点好听的' " :focus="focus"
			placeholder-class="ac" cursor-spacing="10" :adjust-position="true" v-model="content" />
		<image :src="info.like_type == 1 ?  ossUrl + `/static/18.png` : ossUrl + `/static/17.png`" mode=""
			class="send-img_1" @click="likeRquest(params.id)"></image>
		<image :src="ossUrl + `/static/wxChat/1.png`" mode="" class="send-img_2" @click="sure"></image>
	</view>
	<u-gap :height="70"></u-gap>
	<!-- 操作菜单 -->
	<u-action-sheet :actions="list" :show="show"></u-action-sheet>

	<view class="footer-btn" v-if="needCard&&!info.business_card_id">
		<view class="createCard" @click="addCircle">
			创建我的名片
		</view>
	</view>

</view>
</template>

<script>
	import VideoTemplate from './components/videoTemplate/video.vue'
	import {
		InformationLogDetails,
		InformationPostMessage,
		InformationLike,
		InformationApplication,
		InformationAddMessage,
		InformationUserInfo,
		InformationCancellation,
		InformationDelMessage,
		circle_host_information,
		circle_deleteLog,
		circle_pay,
		polling_reservation_list
	} from '@/common/http/api.js'
	import countDownVue from './components/countDown.vue';
	import {
		convertToTimestamp,
		getRemainingTimeToTimestamp,
		formatTimestamp
	} from '@/common/time.js'
	import productsVue from './components/products/products.vue';
	import videoVue from './components/video/video.vue';
	import {
		openMap,
		goMap
	} from '@/common/map.js'
	import identityAvatarVue from '@/components/identity-avatar/identity-avatar.vue';
	import {
		LoginHandle,
		isHasCardList
	} from '@/common/login.js'
	import {
		throttle
	} from '@/common/util.js'
	export default {
		components: {
			countDownVue,
			productsVue,
			videoVue,
			VideoTemplate,
			identityAvatarVue
		},
		data() {
			return {
				title: '标题',
				show: false,
				//分页
				params: {
					page: 1,
					id: ''
				},
				needCard: false,
				isList: true,
				list: [],
				info: '',
				content: '',
				other: '',
				focus: false,
				userInfo: '',
				token: '',
				timer: null,
				isTimeOut: 0,
				circle_info: {},
				payLoading: false,
				isCreateCard: false,
				isbtnplay: false,
				pageHeight: 0,
				argument: {},
			}
		},
		onPageScroll() {
			setTimeout(()=>{
					this.stopVideo()
			},500)
		

		},
		onLoad(e) {

			this.params.id = e.id
			if (e.userId) {
				this.params['fx_type'] = JSON.stringify({
					"type": "1",
					"data": {
						"user_id": e.userId
					}
				})
			}

			const page = getCurrentPages()
			if (page.length == 1) {
				this.needCard = true
			}

			uni.getSystemInfo({
				success: res => {
					this.pageHeight = res.windowHeight;

				}
			});


			this.argument = e
		},
		onShow() {
			isHasCardList(this.argument).then(res => {
				this.token = uni.getStorageSync('token')
				this.payLoading = false
				if (this.token) {
					InformationUserInfo().then(res => {
						this.userInfo = res.data
					})
				}
			}).catch(err => {
				this.isCreateCard = false
			}).finally(() => {
				this.init()
			})
		},

		onReachBottom() {
			if (this.isList) {
				this.params.page++
				this.init()
			}
		},

		onShareAppMessage() {
			let img = ''
			try {
				if (Array.isArray(this.info.upload) && this.info.upload.length > 0) {
					this.info.upload.forEach(i => {
						if (this.$getIsImage(i) === 1 && img === '') {
							img = i
						}
					})
				}
			} catch (e) {

			}

			//是否有上传分享图片
			if (this.info?.share_pictures) {
				img = this.info.share_pictures
			}
			let title = this.info.type == 3 ? this.info.reservation.title || '' : this.info.content
			let path = '/pages/loading/loading?userId=' + this.userInfo.id + '&type=4' + '&id=' + this.params.id

			return {
				title,
				path,
				imageUrl: img
			};
		},
		onShareTimeline() {
			let img = ''
			try {
				if (Array.isArray(this.info.upload) && this.info.upload.length > 0) {
					this.info.upload.forEach(i => {
						if (this.$getIsImage(i) === 1 && img === '') {
							img = i
						}
					})
				}
			} catch (e) {

			}
			let title = this.info.type == 3 ? this.info.reservation.title || '' : this.info.content
			let path = 'is_mixin_collect=3&userId=' + this.userInfo.id + '&type=4' + '&id=' + this.params.id
			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		onAddToFavorites(res) {

			let img = ''
			try {
				if (Array.isArray(this.info.upload) && this.info.upload.length > 0) {
					this.info.upload.forEach(i => {
						if (this.$getIsImage(i) === 1 && img === '') {
							img = i
						}
					})
				}
			} catch (e) {

			}

			//是否有上传分享图片
			if (this.info?.share_pictures) {
				img = this.info.share_pictures
			}

			let title = this.info.type == 3 ? this.info.reservation.title || '' : this.info.content
			let path = 'is_mixin_collect=3&userId=' + this.userInfo.id + '&type=4' + '&id=' + this.params.id

			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		onHide() {
			clearTimeout(this.timer)
			this.timer = null
		},
		onUnload() {
			clearTimeout(this.timer)
			this.timer = null
		},
		methods: {

			btnplay(e) {
				this.isbtnplay = e
			},
			stopVideo: throttle(function() {


				const query = uni.createSelectorQuery().in(this);

				query.select('#video').boundingClientRect(data => {


					let bottomDistance = this.pageHeight - data.top - data.height;
					if (data && this.isbtnplay) {
						let num = data.height + data.top - 100
						let bnum = data.bottom
						let ele = this.$refs.VideoTemplateRef3[0]
						if (num <= 0 || bottomDistance <= 0) {
							ele.pause()
						} else {
							ele.play()

						}
					}


				}).exec();

			}, 500),

			getRemainingTimeToTimestamp,
			formatTimestamp,
			goMap,
			addCircle() {
				uni.showModal({
					title: '',
					content: `是否加入${this.info.circle_name}圈子？`,
					showCancel: true,
					cancelText: '去加入',
					confirmText: '找兴趣',
					confirmColor: '#12B475',
					cancelColor: '#12B475',
					success: res => {
						if (res.cancel) {
							if (this.info.circle_type != 1) {
								uni.navigateTo({
									url: '/pages/index/addCard?id=' + this.info.circle_id +
										'&name=' + this.info.circle_name
								})
							} else {
								uni.navigateTo({
									url: '/pages/index/addCard?id=' + this.info.circle_id
								})
							}
						} else if (res.confirm) {
							uni.navigateTo({
								url: '/pagesA/findInterest/findInterest'
							})
						}
					}
				});

			},
			opencompany() {
				console.log('this.user', this.user)
				const itemList = [
					'导航',
					'复制地址'
				]
				uni.showActionSheet({
					itemList,
					success: res => {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						const name = itemList[res.tapIndex]
						switch (name) {
							case '导航':
								if (!(this.info.reservation.latitude && this.info.reservation.longitude))
									return this.$u.toast('暂不支持！')
								this.goMap({
									latitude: this.info.reservation.latitude,
									longitude: this.info.reservation.longitude,
									name: this.info.reservation.address
								})
								break;
							case '复制地址':
								this.copy(this.info.reservation.address)
								break;
							default:
								break;
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			formattedText(e) {
				// 替换换行符为 <br> 标签
				if (!e) return ''
				return e.replaceAll(/\n/g, '<br/>');
			},
			setPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				});
			},
			delCircle() {


				uni.showModal({
					title: '',
					content: '是否确认删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#E4393C',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '删除中'
							})
							circle_deleteLog({
								user_id: this.userInfo.id,
								circle_id: this.info.circle_id,
								log_id: this.info.id
							}).then(res => {
								uni.hideLoading()
								this.$u.toast('删除成功')
								uni.setStorageSync("delLogId", this.info.id)
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}
					}
				});



			},
			async getCircleInfo() {
				if (this.info.circle_id === 0 || !this.token) return
				const res = await circle_host_information({
					circle_id: this.info.circle_id
				})
				this.circle_info = res.data
			},
			whetherItTimedOut(time) {
				if (this.getRemainingTimeToTimestamp(time) <= 0) return
				this.timer = setInterval(() => {
					const t = this.getRemainingTimeToTimestamp(time)
					this.isTimeOut = t
					if (t <= 0) {
						this.isTimeOut = 0
						clearTimeout(this.timer)
					}
				}, 1000)
			},
			delComment(id) {
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					confirmColor: '#E4393C',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确认按钮');
							InformationDelMessage({
								id
							}).then(res => {
								this.reload()
							})
						}
					}
				});
			},
			getPrevImg(arr, item) {

				let img = []
				arr.forEach(i => {
					if (this.$getIsImage(i) === 1) {
						img.push(i)
					}
				})
				let count = 0
				img.forEach((i, index) => {
					if (i === item) {
						count = index
					}
				})

				this.MpreviewImage(img, count)
			},
			copy(name) {
				if (name) {
					uni.setClipboardData({
						data: name,
						success: function() {
							uni.showToast({
								duration: 3000,
								title: "已复制!",
								icon: 'none'
							})
						}
					});
				} else {
					uni.showToast({
						duration: 3000,
						title: "暂无内容复制！"
					})
				}

			},
			toPeople(id) {
				uni.navigateTo({
					url: '/pagesA/eventRegistration/eventRegistration?id=' + id
				})
			},
			toLogin() {

				uni.navigateTo({
					url: '/pages/login/login?isApi=2'
				})
			},
			cancle(id) {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				InformationCancellation({
					id
				}).then(res => {
					this.reload()
					uni.showToast({
						duration: 3000,
						title: '取消成功',
						icon: 'none'
					})
				}).finally(err => {
					uni.hideLoading()
				})
			},
			toLikeNum(e) {
				uni.navigateTo({
					url: '/pagesA/numberLikes/numberLikes?id=' + this.info.id
				})
			},
			likeRquest(id) {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				InformationLike({
					id
				}).then(res => {
					this.reload()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			open() {
				this.show = true
			},
			reload() {
				this.list = []
				this.params.page = 1
				this.init()
			},
			init() {
				uni.showLoading()
				InformationLogDetails(this.params).then(res => {
					this.info = res.data
					uni.setNavigationBarTitle({
						title: res.data.circle_name + '圈的圈子'
					})
					if (Array.isArray(res.data.message) && res.data.message.length > 0) {
						if (this.params.page === 1) {
							this.list = res.data.message
						} else {
							this.list = this.list.concat(res.data.message)
						}
					} else {
						this.isList = false
					}

					this.whetherItTimedOut(this.info.reservation.actitveEndTime)
					this.getCircleInfo()
				}).finally(err => {
					uni.hideLoading()
				})
			},
			getValue(value) {
				if (value > 0) {
					return value.toFixed(2)
				}
				return 0
			},
			sure() {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				if (this.content === '') {
					uni.showToast({
						duration: 3000,
						title: '请输入内容!',
						icon: 'none'
					})
					return
				}
				let data = {
					content: this.content,
					log_id: this.params.id
				}
				let http = InformationPostMessage
				if (this.other) {
					data['father'] = this.other.id
					http = InformationAddMessage
				}

				uni.showLoading()
				http(data).then(res => {
					uni.hideLoading()
					this.reload()
					this.content = ''
				})
			},
			submit(id) {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				if (this.info.reservation?.is_price === 1) {
					circle_pay({
						id,
						type: 1
					}).then(res => {
						uni.hideLoading()
						//调用微信官方支付接口弹出付款界面,输入密码扣款
						wx.requestPayment({
							timeStamp: String(res.data.timeStamp),
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: res => {
								console.log('支付成功', res);
								// uni.showToast({duration:3000,
								// 	title: '支付成功',
								// 	icon: 'none'
								// })
								// this.$emit('reload')
								// this.close()
								// uni.showLoading()
								// InformationApplication({
								// 	id
								// }).then(res => {
								// 	uni.hideLoading()
								// 	this.reload()
								// 	if (this.other) {
								// 		this.other = ''
								// 	}
								// })

								//轮询
								this.payLoading = true
								this.getStatus(id)
							},
							fail: function(err) {
								console.log('支付失败', err);
							}
						})
					})
				} else {
					//不付费
					uni.showLoading()
					InformationApplication({
						id
					}).then(res => {
						uni.hideLoading()
						this.$u.toast('报名成功！')
						this.reload()
						if (this.other) {
							this.other = ''
						}
						this.father = father
					})
				}


			},
			getStatus(id) {
				if (this.payLoading === false) return
				uni.showLoading({
					title: '查询中',
					mask: true
				})
				polling_reservation_list({
					r_id: id
				}).then(res => {
					if (res.data === 1) {
						//成功的
						this.payLoading = false

						uni.hideLoading()
						this.$u.toast('报名成功！')
						this.reload()
						if (this.other) {
							this.other = ''
						}
					} else {
						setTimeout(() => {
							this.getStatus(id)
						}, 2000)
					}
				})
			},
			setOther(it, father) {
				this.content = ''
				this.other = it
				if (father) {
					this.other.id = father
				}
				this.focus = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-Y {
		width: 100vw;
		height: 100vh;
	}

	.footer-btn {
		position: fixed;
		bottom: 160rpx;
		width: 570rpx;
		left: 90rpx;
		justify-content: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		z-index: 999;
		height: 80rpx;
		border-radius: 40rpx;

	}

	image {
		width: 100%;
		height: 100%;
	}

	.list-item {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 12rpx;

		box-sizing: border-box;
		padding: 28rpx 30rpx;

		.list-item-t {
			display: flex;
			align-items: center;
			margin-bottom: 25rpx;
		}

		.list_item-img {
			width: 90rpx;
			height: 90rpx;
		}

		.list_item-header {
			min-width: 0;
			flex: 1;
			margin-left: 28rpx;


			.list_item-header-time {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 22rpx;
				color: #999999;
			}
		}

		.list-item-content {
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #211C1E;
			margin-bottom: 30rpx;
			letter-spacing: 2rpx;
			white-space: pre-wrap;
		}

		.course {

			width: 100%;
			margin-bottom: 35rpx;

			.course-list {
				display: grid;
				grid-template-columns: repeat(1, 1fr);
				grid-gap: 12rpx;
			}

			.course-list-item {
				width: 100%;
				//background: #F6F7F8;

				.course-list-item-header {
					width: 100%;
					position: relative;
					// margin-bottom: 11rpx;

					.course-list-item-header-play {
						position: absolute;
						right: 17rpx;
						bottom: 9rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.course-list-item-title {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #292B3B;
					margin-bottom: 14rpx;
					box-sizing: border-box;
					padding: 0 7rpx;
				}

				.course-list-item-footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding: 0 7rpx;
					padding-bottom: 7rpx;

					.course-list-item-footer-status {
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #FF8400;
					}

					.course-list-item-footer-nums {
						display: flex;
						justify-content: center;
						align-items: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #292B3B;

						image {
							width: 19rpx;
							height: 15rpx;
							margin-right: 11rpx;
						}
					}
				}
			}
		}

		.list-time {
			width: 100%;
			font-size: 26rpx;
			color: #7A7A7A;
			margin-bottom: 30rpx;
			text-align: right;
		}

		.list-add {
			margin-bottom: 30rpx;
			text-align: right;

			span {
				font-size: 28rpx;
				color: #e4393c;
			}
		}

		.list-item-activity {
			width: 100%;
			margin-bottom: 22rpx;

			.list-item-activity-crad {
				background: #F6F7F8;
				border-radius: 33rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 24rpx 22rpx;
				margin-bottom: 25rpx;

				.list-item-activity-crad-item {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #211C1E;
					display: flex;
					margin-bottom: 33rpx;

					text {
						font-weight: bold;
					}

					view {
						width: 47rpx;
						height: 51rpx;
						background: #FFFFFF;
						border-radius: 12rpx;
						border: 2px solid #DBDFE1;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #211C1E;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 8rpx;
					}
				}

				.list-item-activity-crad-item:last-child {
					margin-bottom: 0;
				}

			}

			.list-item-activity-people {
				width: 100%;
				margin-bottom: 22rpx;

				.list-item-activity-people-title {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #211C1E;
					margin-bottom: 31rpx;
				}

				.nums {
					width: 100%;
					height: 80rpx;
					background: #FFFFFF;
					padding: 8rpx 0;
					display: flex;
					align-items: center;
					margin: 0 auto;
					margin-bottom: 24rpx;
					border-top: 1rpx solid #e4e4e4;
					border-bottom: 1rpx solid #e4e4e4;

					.nums-img {
						//padding-left: 36rpx;
						min-width: 0;
						flex: 1;
						display: flex;
						align-items: center;

						image {
							width: 56rpx;
							height: 56rpx;
						}

						// 定义变量，设置循环次数
						$num-items: 10;

						// 循环生成样式
						@for $i from 1 through $num-items {
							image:nth-child(#{$i}) {
								transform: translateX($i * -6rpx);
							}
						}
					}

					.nums-tx {
						// width: 130rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #211C1E;
					}
				}
			}

			.list-item-activity-btn {
				width: 170rpx;
				height: 66rpx;
				background: #12B475;
				border-radius: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				margin-bottom: 22rpx;
			}

			.list-item-activity-tx {
				margin-bottom: 22rpx;
				font-size: 28rpx;
				color: #12B475;
			}
		}

		.list-item-score {
			background: #F6F7F8;
			border-radius: 33rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 22rpx;
			margin-bottom: 25rpx;

			.list-item-score-list {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				view {
					margin-right: 30rpx;
					font-size: 22rpx;

					text {
						color: #12B475;
					}
				}
			}
		}

		.list-item-footer {
			padding-top: 24rpx;
			box-sizing: border-box;
			padding: 24rpx 24rpx 0;
			border-top: 1rpx solid #D7D7D7;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>view {
				display: flex;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 7rpx;
				}
			}
		}
	}

	.list_item-header-h {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.list_item-header-h-l {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.list_item-header-h-name {
				display: flex;
				align-items: center;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				margin-right: 35rpx;

				image {
					margin-left: 14rpx;
					width: 26rpx;
					height: 26rpx;
				}
			}


		}


		.list_item-header-h-r {
			padding: 12rpx 18rpx;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			background: #F6F7F8;
		}

		.list_item-header-h-btn {
			font-size: 24rpx;
			padding: 10rpx 15rpx;
			border-radius: 40rpx;
			color: #B8B8B8;
			border: 1rpx solid #B8B8B8;
		}

		.list_item-header-h-img {
			width: 37rpx;
			height: 28rpx;
			display: flex;

			image {
				width: 30rpx;
				height: 33rpx;
			}
		}
	}

	.list_item-header-h-address {
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #7A7A7A;

		image {
			margin-right: 10rpx;
			width: 30rpx;
			height: 30rpx;
		}
	}

	.comment {
		width: 690rpx;
		margin: 0 auto;

		.comment-title {
			font-family: PingFang SC;
			font-weight: 600;
			font-size: 26rpx;
			color: #131313;
			margin-bottom: 56rpx;
		}

		.comment-list {
			width: 100%;
			border-bottom: 1rpx solid #D7D7D7;
			margin-bottom: 20rpx;

			.comment-list-c {
				display: flex;
				margin-bottom: 15rpx;
			}

			.list_item-header-h-name {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 26rpx;
				color: #666666;
			}

			.comment-list-img {
				width: 48rpx;
				height: 48rpx;
				margin-right: 22rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					margin-top: 7rpx;
				}
			}

			.comment-list-center {
				flex: 1;
				min-width: 0;
				box-sizing: border-box;

				.list_item-header-h-img {
					width: 37rpx;

					image {
						width: 37rpx;
						height: 8rpx;
					}
				}

				.comment-list-center-content {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #211C1E;
					margin-bottom: 17rpx;
				}

				.list_item-header-h-time {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 20rpx;
					color: #999999;
				}
			}

		}

		.comment-list-layout {
			width: 100%;
			box-sizing: border-box;
			padding-left: 92rpx;
			margin-top: 22rpx;
		}
	}

	.send {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30rpx;
		border-top: 1rpx solid #D7D7D7;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;

		input {
			flex: 1;
			min-width: 0;
			height: 70rpx;
			background: #F6F7F8;
			border-radius: 35rpx;
			box-sizing: border-box;
			padding: 0 36rpx;
			line-height: 70rpx;
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #000;
		}

		.ac {
			font-family: PingFang SC;
			font-weight: 300;
			font-size: 26rpx;
			color: #999999;
		}

		.send-img_1 {
			width: 38rpx;
			height: 36rpx;
			margin-left: 30rpx;
		}

		.send-img_2 {
			width: calc(142rpx / 1.5);
			height: calc(78rpx / 1.5);
			margin-left: 30rpx;
		}
	}

	.list-item-score {
		background: #F6F7F8;
		border-radius: 33rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 12rpx 22rpx;
		margin-bottom: 25rpx;

		.list-item-score-list {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 15rpx;

			view {
				margin-right: 10rpx;
				font-size: 22rpx;

				text {
					color: #12B475;
				}
			}
		}
	}

	.list-item-activity-btn-cancle {
		width: 170rpx;
		height: 66rpx;
		background: #fff;
		border: 1px solid #12B475;
		border-radius: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		margin-bottom: 22rpx;
	}

	.list-item-score {
		padding-bottom: 0 !important;

		.list-item-score-list {
			align-items: none;
			flex-wrap: wrap;
			margin-bottom: 0rpx !important;

			view {
				margin-right: 30rpx;
				padding-bottom: 22rpx;
			}
		}
	}

	.list-del {
		width: fit-content;
		color: #e4393c;
		font-size: 22rpx;
	}
</style>